<template>
    <div class="authority-container" :class="[prefixCls]">
        <div class="content-box">
            <div class="left">
                <!-- <span>用户角色</span> -->
                <el-select v-if="false"
                           @change="roleChange"
                           v-model="roleId"
                           class="m-2"
                           placeholder="Select"
                           size="large">
                    <el-option
                        v-for="item in roles"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
                <el-table :data="roles" border style="width: 100%">
                    <el-table-column label="" width="50">
                        <template #default="scope">
                            <el-radio @change="roleChange" v-model="roleId" :label="scope.row.id" size="small">{{ '' }}</el-radio>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" label="角色名称" />
                </el-table>

            </div>

            <div class="tree-content right">

                <el-tree
                    ref="treeRef"
                    node-key="id"
                    :props="{
                        'label':'displayName'
                    }"
                    :default-checked-keys="menuIds"
                    :data="routeDatas"
                    :render-after-expand="true"
                    multiple
                    show-checkbox
                    @node-click="nodeClick"
                />
                <div class="btn-box">
                    <el-button type="primary" @click="sureClick">确 认</el-button>
                </div>
            </div>
        </div>


    </div>
</template>

<script setup>
import {rolesAll} from "@/api/roles"
import {apiRoleMenusGetRoleMenuIds} from "@/api/roleMenus"
import {apiRoleMenusUpdate} from "@/api/roleMenus"
import { reactive, ref, watch } from 'vue'
import {menuHook} from "@/hooks/menu"
import {findParents} from "@/utils/tools"
import {useDesign} from '@/hooks/useCssPrefix'
import {uniq} from "lodash-es"
import { ElMessage, ElMessageBox } from 'element-plus'
defineOptions({
  name: "Authority",
});


const { prefixCls } = useDesign('default-layout');

const roles = ref([]);
const menuIds = ref([]);
const roleId = ref('');
const treeRef = ref(null);

async function roleChange(id) {
  const res = await apiRoleMenusGetRoleMenuIds({id})
  menuIds.value = res?.items ?? []

  treeRef.value.setCheckedKeys(menuIds.value)
}

async function getAllRoles() {
  const res = await rolesAll();
  roles.value = res.items;
}
getAllRoles();
const {routeDatas} = menuHook();

function nodeClick() {
  console.log('nodeClick')
}


async function sureClick() {
  const res = [];
  const menuIds = treeRef.value.getCheckedKeys(false,false);
  menuIds.forEach((id) => {
    const arr = findParents(routeDatas.value,id);
    res.push(...arr,id);
  });
  console.log('res',res);


  await apiRoleMenusUpdate({
    menuIds:uniq(res), // formParams.value.menuIds, //treeRef.value.getCheckedKeys(false), //
    roleId: roleId.value
  })
  ElMessage({
    type: 'success',
    message: '修改成功',
  })

}

</script>

<style lang="scss" scoped>

$prefix-cls: '#{$namespace}-default-layout';

.#{$prefix-cls} {
}

.authority-container {
  padding: 16px;
  .content-box {
    display: flex;
    justify-content: space-between;
  }
  .left {
    width: 48%;
  }
  .right {
    width: 48%;
    .btn-box {
      margin-top: 20px;
    }
  }
}
</style>